<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cron在线表达式生成器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }
        body {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
            line-height: 1.6;
        }
        h1, h2, h3 {
            margin-bottom: 15px;
            color: #333;
        }
        .cron-intro {
            margin-bottom: 30px;
            padding: 15px;
            background: #f5f5f5;
            border-radius: 8px;
        }
        .cron-fields {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }
        .field-group {
            display: flex;
            flex-direction: column;
        }
        .field-group label {
            font-weight: bold;
            margin-bottom: 8px;
            color: #555;
        }
        .field-group input, .field-group select {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        .cron-result {
            margin-bottom: 30px;
            padding: 20px;
            background: #fff;
            border: 1px solid #eee;
            border-radius: 8px;
        }
        #cronExpr {
            font-size: 18px;
            font-weight: bold;
            color: #2c3e50;
            margin: 10px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
        }
        .cron-examples {
            padding: 15px;
            background: #f5f5f5;
            border-radius: 8px;
        }
        .example-item {
            margin: 8px 0;
            padding: 5px;
            background: #fff;
            border-radius: 4px;
        }
        .example-code {
            font-family: 'Courier New', monospace;
            color: #e74c3c;
        }
        .tip {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <h1>Cron在线表达式生成器</h1>

    <!-- Cron基础说明 -->
    <div class="cron-intro">
        <h3>Cron表达式规则</h3>
        <p>由6个字段组成，依次为：<b>秒 (0-59)</b>、<b>分钟 (0-59)</b>、<b>小时 (0-23)</b>、<b>天数 (1-31)</b>、<b>月份 (1-12/Jan-Dec)</b>、<b>星期 (0-6/Sun-Sat)</b></p>
        <p>支持符号：<b>*</b>（任意值）、<b>,</b>（多值分隔）、<b>/</b>（间隔）、<b>-</b>（范围）、<b>?</b>（仅日/星期，表不指定）</p>
    </div>

    <!-- 字段选择区域 -->
    <div class="cron-fields">
        <div class="field-group">
            <label for="second">1. 秒 (0-59)</label>
            <input type="text" id="second" placeholder="示例：* / 0-30" value="0">
            <div class="tip">默认0，支持*、*/5、10-20等格式</div>
        </div>
        <div class="field-group">
            <label for="minute">2. 分钟 (0-59)</label>
            <input type="text" id="minute" placeholder="示例：* / 0-30" value="0">
            <div class="tip">默认0，支持*、*/5、10-20等格式</div>
        </div>
        <div class="field-group">
            <label for="hour">3. 小时 (0-23)</label>
            <input type="text" id="hour" placeholder="示例：* / 8-18" value="*">
            <div class="tip">默认*（每小时），支持*、*/2、9-18等格式</div>
        </div>
        <div class="field-group">
            <label for="day">4. 天数 (1-31)</label>
            <input type="text" id="day" placeholder="示例：* / 1-15 或 ?" value="*">
            <div class="tip">日和星期需一个为?，避免冲突</div>
        </div>
        <div class="field-group">
            <label for="month">5. 月份</label>
            <select id="month">
                <option value="*">*</option>
                <option value="1">1 (Jan)</option>
                <option value="2">2 (Feb)</option>
                <option value="3">3 (Mar)</option>
                <option value="4">4 (Apr)</option>
                <option value="5">5 (May)</option>
                <option value="6">6 (Jun)</option>
                <option value="7">7 (Jul)</option>
                <option value="8">8 (Aug)</option>
                <option value="9">9 (Sep)</option>
                <option value="10">10 (Oct)</option>
                <option value="11">11 (Nov)</option>
                <option value="12">12 (Dec)</option>
            </select>
        </div>
        <div class="field-group">
            <label for="week">6. 星期</label>
            <select id="week">
                <option value="?">?</option>
                <option value="0">0 (Sun)</option>
                <option value="1">1 (Mon)</option>
                <option value="2">2 (Tue)</option>
                <option value="3">3 (Wed)</option>
                <option value="4">4 (Thu)</option>
                <option value="5">5 (Fri)</option>
                <option value="6">6 (Sat)</option>
                <option value="MON-FRI">MON-FRI（周一至周五）</option>
            </select>
        </div>
    </div>

    <!-- 生成结果区域 -->
    <div class="cron-result">
        <h3>生成的Cron表达式</h3>
        <div id="cronExpr">0 0 * * * ?</div>
        <button onclick="copyCron()">复制表达式</button>
    </div>

    <!-- 示例区域 -->
    <div class="cron-examples">
        <h3>常用Cron示例</h3>
        <div class="example-item">
            <span class="example-code">0 0 12 * * ?</span> - 每天中午12点执行
        </div>
        <div class="example-item">
            <span class="example-code">0 0/5 * * * ?</span> - 每5分钟执行一次
        </div>
        <div class="example-item">
            <span class="example-code">0 0 8-18 ? * MON-FRI</span> - 周一至周五8点到18点每小时执行一次
        </div>
    </div>

    <script>
        // 获取所有字段元素
        const second = document.getElementById('second');
        const minute = document.getElementById('minute');
        const hour = document.getElementById('hour');
        const day = document.getElementById('day');
        const month = document.getElementById('month');
        const week = document.getElementById('week');
        const cronExpr = document.getElementById('cronExpr');

        // 实时生成Cron表达式
        function updateCron() {
            // 处理日和星期的冲突（若日不是?，星期强制为?；反之同理）
            if (day.value.trim() !== '?' && week.value !== '?') {
                week.value = '?';
            }
            if (week.value.trim() !== '?' && day.value !== '?') {
                day.value = '?';
            }

            // 拼接6个字段为Cron表达式
            const expr = [
                second.value.trim() || '*',
                minute.value.trim() || '*',
                hour.value.trim() || '*',
                day.value.trim() || '?',
                month.value.trim() || '*',
                week.value.trim() || '?'
            ].join(' ');

            cronExpr.textContent = expr;
        }

        // 监听所有字段变化，实时更新
        [second, minute, hour, day, month, week].forEach(field => {
            field.addEventListener('input', updateCron);
            field.addEventListener('change', updateCron);
        });

        // 复制表达式到剪贴板
        function copyCron() {
            navigator.clipboard.writeText(cronExpr.textContent)
                .then(() => alert('已复制Cron表达式！'))
                .catch(err => alert('复制失败：' + err));
        }

        // 初始加载时生成一次
        updateCron();
    </script>
</body>
</html>